<!-- // 给我留言页面 -->
<template>
  <div id="message">
    <div class="wrapper">
      <div class="content">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="留言内容"
          v-model="content"
          clearable>
        </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submit()">提交留言</el-button>
      </div>

 

       <!-- 留言区域 -->
    <div class="all">
      <el-scrollbar style="height: 400px;">
        <ul class="msglist">
          <li 
            class="msg-card" 
            @mouseenter="enter(index)" 
            @mouseleave="leave(index)"
            v-for="(data, index) in msg" :key="index"
          >
            <div class="card-wrapper">
              <div class="avatar-box">
                <img src="@/assets/images/momo.jpg" alt="头像" class="avatar">
              </div>
              <div class="content-box">
                <div class="header">
                  <span class="username">{{ data.nickName }}</span>
                  <span class="time">{{ data.time }}</span>
                </div>
                <div class="message-text">
                  {{ data.content }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-scrollbar>
    </div>
      
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {listMessage,addMessage} from '@/api/student/message/message';
import useUserStore from '@/store/modules/user'


// 响应式数据
const userStore = useUserStore()
const flag = ref(false)
const current = ref(0)
const content = ref('')
const msg = ref([])

const pagination = reactive({
  pageNum: 1,
  pageSize: 10
})
const total=ref(0)

// 生命周期钩子
onMounted(() => {
  getMsg()
})

// 方法
const getMsg = async () => {
  listMessage({...pagination}).then(res=>{
    msg.value = res.rows
  })
}

const handleSizeChange = (val) => {
  pagination.size = val
  getMsg()
}

const handleCurrentChange = (val) => {
  pagination.current = val
  getMsg()
}

const submit = async () => {
  try {
    addMessage({userId:userStore.id,nickName:userStore.nickName,content:content.value}).then(res=>{
    if (res.code === 200) {
      ElMessage.success('留言成功')
      content.value = ''
      getMsg()
    }
    })
  } catch (error) {
    console.error('留言提交失败:', error)
    ElMessage.error('留言提交失败')
  }
}


const enter = (index) => {
  flag.value = true
  current.value = index
}

const leave = (index) => {
  flag.value = false
  current.value = index
}
</script>

<style lang="less" scoped>


#message .wrapper {
  //改背景颜色
  background-color: #fff;
}

#message {
  position: relative;
  min-height: 85vh; /* 确保容器有最小高度 */
      width: 1200px;
  margin: 0 auto;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 85vh; /* 与父容器高度一致 */
  margin-top: 65px;
}

.content {
  margin: 20px;
}

#message {
  
  .all {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    
    .msglist {
      .msg-card {
          background: #ffffff;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.05);
          margin-bottom: 15px;
          transition: all 0.3s ease;
              list-style-type: none;

          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
          }
          
          .card-wrapper {
            display: flex;
            padding: 15px 20px;
            position: relative;
            
            &:before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 40px;
              background-color: #409EFF;
              border-radius: 2px;
            }
          }
          
          .avatar-box {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            
            .avatar {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .content-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;
              
              .username {
                font-size: 16px;
                font-weight: 600;
                color: #333;
              }
              
              .time {
                font-size: 12px;
                color: #999;
                i {
                  margin-right: 4px;
                  color: #666;
                }
              }
            }
            
            .message-text {
              font-size: 14px;
              line-height: 1.6;
              color: #555;
              word-break: break-word;
            }
          }
        }
      }
    }
  }
</style>
